import '../../style/common.less'
import echarts from 'echarts'
const renderEchart = (chart,data,label) => {
    let dom = 800;
    let barWidth = dom / 20;
    let colors = [{
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [{
            offset: 0,
            color: '#FF3FDA'
        }, {
            offset: 0.5,
            color: '#FF3FDA'
        }, {
            offset: 0.5,
            color: '#CC1BAA'
        }, {
            offset: 1,
            color: '#CC1BAA'
        }]
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [{
            offset: 0,
            color: '#602CFF'
        }, {
            offset: 0.5,
            color: '#602CFF'
        }, {
            offset: 0.5,
            color: '#4915E6'
        }, {
            offset: 1,
            color: '#4915E6'
        }]
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [{
            offset: 0,
            color: '#00FFFF'
        }, {
            offset: 0.5,
            color: '#00FFFF'
        }, {
            offset: 0.5,
            color: '#11A6D0'
        }, {
            offset: 1,
            color: '#11A6D0'
        }]
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [{
            offset: 0,
            color: '#89FF5E'
        }, {
            offset: 0.5,
            color: '#89FF5E'
        }, {
            offset: 0.5,
            color: '#48DD12'
        }, {
            offset: 1,
            color: '#48DD12'
        }]
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [{
            offset: 0,
            color: '#FFD05C'
        }, {
            offset: 0.5,
            color: '#FFD05C'
        }, {
            offset: 0.5,
            color: '#DEA821'
        }, {
            offset: 1,
            color: '#DEA821'
        }]
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [{
            offset: 0,
            color: '#FF7853'
        }, {
            offset: 0.5,
            color: '#FF7853'
        }, {
            offset: 0.5,
            color: '#DB3E13'
        }, {
            offset: 1,
            color: '#DB3E13'
        }]
    },
    {
        type: 'linear',
        x: 0,
        x2: 1,
        y: 0,
        y2: 0,
        colorStops: [{
            offset: 0,
            color: '#AA48FF'
        }, {
            offset: 0.5,
            color: '#AA48FF'
        }, {
            offset: 0.5,
            color: '#8E15F8'
        }, {
            offset: 1,
            color: '#8E15F8'
        }]
    }
];
    let option = {
        backgroundColor: "#fff", //#010d3a
      //标题
      title: {
          text: '今日实时变化趋势',
          textStyle: {
              color: '#00FFFF',
              fontWeight: '800',
              fontSize: `20`,
          },
          left: 'center',
          top: '5%'
      },
      //提示框
      tooltip: {
          trigger: 'axis',
          formatter: "{b} : {c}",
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      /**区域位置*/
        grid: {
            left: '10%',
            right: '10%',
            top: 80,
            bottom: 40,
          },
      /**图例大小*/
          //  legend: {
          //   type: 'plain',
          //   left: 0,
          //   top: 20,
          //   itemGap: 20,
          //   itemWidth: 35,
          //   itemHeight: 20
          // },
      //X轴
      xAxis: {
          name:'X',
           nameTextStyle: {
              color: '#000000', //#FFFFFF
              padding: [0, 0, 0, 20]
  
            },
          data: label,
          show: true,
          type: 'category',
          axisLine: {
              show: true,
              lineStyle: {
                  color: 'rgba(0,0,0,1)',//rgba(255,255,255,1)
                   shadowColor:'rgba(0,0,0,1)', //rgba(255,255,255,1)
                  shadowOffsetX: '20',
              },
              symbol: ['none', 'arrow'],
              symbolOffset: [0, 40]
          },
          splitLine: {
              show: true,
              lineStyle: {
                  color: 'rgba(0,0,0,0.2)' //rgba(255,255,255,0.2)
              },
          },
          axisLabel: {
              rotate: -30,
              fontSize: 12,
          },
      },
      yAxis: {
          show: true,
          splitNumber: 4,
          axisLine: {
              show: true,
              lineStyle: {
                  color: 'rgba(0,0,0,0.2)'//rgba(255,255,255,0.2)
              },
          },
          splitLine: {
              show: true,
              lineStyle: {
                  color: 'rgba(0,0,0,0.2)'//rgba(255,255,255,0.2)
  
              },
          },
          axisLabel: {
              color: '#000000',//#FFFFFF
          }
      },
      series: [{
              type: 'bar',
              barWidth: barWidth,
              itemStyle: {
                  normal: {
                      color: function(params) {
                          return colors[params.dataIndex % 7];
                      }
                  }
              },
              label: {
                  show: true,
                  position: [barWidth / 2, -(barWidth + 20)],
                  color: '#000000', //#FFFFFF
                  fontSize: 12,
                  fontStyle: 'bold',
                  align: 'center',
              },
              data: data
          },
          {
              z: 2,
              type: 'pictorialBar',
              data: data,
              symbol: 'diamond',
              symbolOffset: [0, '50%'],
              symbolSize: [barWidth, barWidth * 0.5],
              itemStyle: {
                  normal: {
                      color: function(params) {
                          return colors[params.dataIndex % 7];
                      },
                  }
              },
          },
          {
              z: 3,
              type: 'pictorialBar',
              symbolPosition: 'end',
              data: data,
              symbol: 'diamond',
              symbolOffset: [0, '-50%'],
              symbolSize: [barWidth, barWidth * 0.5],
              itemStyle: {
                  normal: {
                      borderWidth: 0,
                      color: function(params) {
                          return colors[params.dataIndex % 7].colorStops[0].color;
                      },
  
                  }
              },
          },
          {
              z: 4,
              type: 'pictorialBar',
              symbolPosition: 'end',
              data: data,
              symbol: 'circle',
              symbolOffset: [0, -barWidth],
              symbolSize: [barWidth * 0.5, barWidth * 0.5],
              itemStyle: {
                  normal: {
                      borderWidth: 0,
                      color: function(params) {
                          return colors[params.dataIndex % 7].colorStops[0].color;
                      },
  
                  }
              },
          },
      ],
  };
  chart.setOption(option)
}

const rendeLineChart = (chart, data) => {
    const colorList = ["#9E87FF", '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF']
    let names = [data.name1, data.name2, data.name3]
    
     
    const dateArry = data.data.map( it => {
        return it.date
    })
    const data1 = data.data.map( it => {
        return it.value1
    })
    const data2 = data.data.map( it => {
        return it.value2
    })
    const data3 = data.data.map( it => {
        return it.value3
    })


    let option = {
        backgroundColor: '#fff',
        legend: {
            show:true,
            data: names,
            icon: 'circle',
            // top: '5%',
            // right: '5%',
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
                color: '#556677'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                label: {
                    show: true,
                    backgroundColor: '#fff',
                    color: '#556677',
                    borderColor: 'rgba(0,0,0,0)',
                    shadowColor: 'rgba(0,0,0,0)',
                    shadowOffsetY: 0
                },
                lineStyle: {
                    width: 0
                }
            },
            backgroundColor: '#fff',
            textStyle: {
                color: '#5c6c7c'
            },
            padding: [10, 10],
            extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
        },
        grid: {
            top: '15%',
            left: 40,
            right: 40,
            bottom: 40
        },
        xAxis: [{
            type: 'category',
            data: dateArry,
            axisLine: {
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: '#556677'
                },
                // 默认x轴字体大小
                fontSize: 12,
                // margin:文字到x轴的距离
                margin: 15
            },
            axisPointer: {
                label: {
                    // padding: [11, 5, 7],
                    padding: [0, 0, 10, 0],
                    /*
        除了padding[0]建议必须是0之外，其他三项可随意设置
        
        和CSSpadding相同，[上，右，下，左]
        
        如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同
        
        padding[2]的10:
        
        10 = 文字距下边线的距离 + 下边线的宽度
                    
        如：UI图中文字距下边线距离为7 下边线宽度为2
        
        则padding: [0, 0, 9, 0]
                    
                    */
                    // 这里的margin和axisLabel的margin要一致!
                    margin: 15,
                    // 移入时的字体大小
                    fontSize: 12,
                    backgroundColor: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: '#fff' // 0% 处的颜色
                        }, {
                            // offset: 0.9,
                            offset: 0.86,
                            /*
    0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）
                            
                            */
                            color: '#fff' // 0% 处的颜色
                        }, {
                            offset: 0.86,
                            color: '#33c0cd' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#33c0cd' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                }
            },
            boundaryGap: false
        }],
        yAxis: [{
            type: 'value',
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#556677'
                }
            },
            splitLine: {
                show: false
            }
        }, {
            type: 'value',
            position: 'right',
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#556677'
                },
                formatter: '{value}'
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#DCE2E8'
                }
            },
            splitLine: {
                show: false
            }
        }],
        series: [{
                name: data.name1,
                type: 'line',
                data: data1,
                symbolSize: 1,
                symbol: 'circle',
                smooth: true,
                showSymbol: false,
                lineStyle: {
                   normal: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                            offset: 0,
                            color: '#9effff'
                        },
                        {
                            offset: 1,
                            color: '#9E87FF'
                        }
                    ]),
                    shadowColor: 'rgba(158,135,255, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                   }
                },
                itemStyle: {
                    normal: {
                        color: colorList[0],
                        borderColor: colorList[0]
                    }
                }
            }, {
                name: data.name2,
                type: 'line',
                data: data2,
                symbolSize: 1,
                symbol: 'circle',
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 5,
                        color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                                offset: 0,
                                color: '#73DD39'
                            },
                            {
                                offset: 1,
                                color: '#73DDFF'
                            }
                        ]),
                        shadowColor: 'rgba(115,221,255, 0.3)',
                        shadowBlur: 10,
                        shadowOffsetY: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: colorList[1],
                        borderColor: colorList[1]
                    }
                }
            },
            {
                name: data.name3,
                type: 'line',
                data: data3,
                symbolSize: 1,
                symbol: 'circle',
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        width: 5,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: '#fe9a'
                            },
                            {
                                offset: 1,
                                color: '#fe9a8b'
                            }
                        ]),
                        shadowColor: 'rgba(254,154,139, 0.3)',
                        shadowBlur: 10,
                        shadowOffsetY: 20
                    }
                },
                itemStyle: {
                    normal: {
                        color: colorList[2],
                        borderColor: colorList[2]
                    }
                }
            }
        ]
    };
    chart.setOption(option)
}

export {
    renderEchart,
    rendeLineChart
}